<form name="form" ng-init="vm.init();refresh(vm.callback);" ng-submit="vm.sendRequest(form.$valid)" novalidate>
  <div class="row x-page-header">
    <div class="col-md-12">
      <div class="x-page-title">HTTP 请求发送</div>
      <div class="pull-right">
        <div class="btn-group x-btn-list">
          <button type="submit" class="btn btn-primary" ng-click="vm.sendType = 'send'"
              ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable">发送</button>
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
              ng-disabled="form.$invalid || !vm.completed || !vm.dataParsable">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><button type="submit" class="btn btn-default btn-block"
                ng-click="vm.sendType = 'download'">发送和下载</button></li>
          </ul>
        </div>
        <div class="btn-group">
          <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
              ng-disabled="form.$invalid || !vm.dataParsable">代码 <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="javascript:void(0)" ng-click="vm.showCode(form.$valid, 'curl')">cURL</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0)" ng-click="vm.showCode(form.$valid, 'postman')">Postman</a></li>
          </ul>
        </div>
        <button id="copy" type="button" class="btn btn-success" ng-disabled="vm.respBody == null">复制</button>
        <button class="btn btn-danger" type="button" ng-click="vm.reset()">重置</button>
      </div>
    </div>
  </div>
  <div class="row x-page-body">
    <div class="col-md-7">
      <fieldset>
        <legend>请求数据
          <font color="green">（简化的网页版<a href="https://www.getpostman.com" class="x-link"
              target="_blank">Postman</a>工具）</font>
        </legend>
        <div class="x-page-scope">
          <div class="form-group">
            <div class="input-group">
              <span class="input-group-addon">
                <select ng-model="vm.method" ng-change="vm.changeMethod(vm.method)">
                  <option value="GET">GET</option>
                  <option value="POST">POST</option>
                  <option value="PUT">PUT</option>
                  <option value="PATCH">PATCH</option>
                  <option value="DELETE">DELETE</option>
                  <option value="HEAD">HEAD</option>
                  <option value="OPTIONS">OPTIONS</option>
                </select>
              </span>
              <div url-select="vm.url">
                <input type="text" class="form-control" name="url" ng-model="vm.url" placeholder="URL" autofocus
                    required pattern="^http(s)?://[\w-\.]+(:\d+)?(/[\w-\./\?%&=]*)?(?:#(.*))?"
                    ng-class="{'x-invalid': form.$submitted && form.url.$invalid}">
                <div class="input-group-addon">
                  <label class="checkbox-inline">
                    <input type="checkbox" ng-value="true" ng-model="vm.cors"> CORS
                  </label>
                </div>
              </div>
            </div>
          </div>
          <uib-tabset active="vm.activeTab" type="tabs" class="x-request">
            <uib-tab index="0" heading="Params({{vm.queryParamsCount}})">
              <div form-table form-type="'query'" form-inputs="vm.queryParams"></div>
            </uib-tab>
            <uib-tab index="1" heading="Authorization">
              <div class="col-md-10 col-md-offset-1" style="margin-top:100px">
                <div class="input-group">
                  <span class="input-group-addon">
                    <label class="radio-inline"><input type="radio" name="authType" value="Basic" ng-model="vm.authType"
                        ng-change="vm.changeAuthValue(vm.authValue = '')">Basic</label>
                    <label class="radio-inline"><input type="radio" name="authType" value="Bearer" ng-model="vm.authType"
                        ng-change="vm.changeAuthValue(vm.authValue = '')">Bearer</label>
                  </span>
                  <input type="text" class="form-control" ng-model="vm.authValue" ng-change="vm.changeAuthValue(vm.authValue)"
                      placeholder="{{vm.authType == 'Bearer' ? 'Token' : 'Username:Password'}}">
                  <span class="input-group-addon">
                    <input type="checkbox" ng-model="vm.authEnabled" ng-change="vm.changeAuthValue(vm.authValue)">
                  </span>
                </div>
              </div>
            </uib-tab>
            <uib-tab index="2" heading="Headers({{vm.headerParamsCount}})">
              <div form-table form-type="'header'" form-inputs="vm.headerParams"></div>
            </uib-tab>
            <uib-tab index="3" heading="Body" disable="vm.method == 'GET' || vm.method == 'HEAD'">
              <div class="form-group">
                <label class="radio-inline" ng-repeat="dataType in vm.dataTypes">
                  <input type="radio" name="data-type" value="{{dataType}}" ng-model="vm.dataType"> {{dataType}}
                </label>
                <div class="radio-inline btn-group" style="margin-left:0" ng-show="vm.dataType == 'raw'">
                  <a href="javascript:void(0)" data-toggle="dropdown">{{vm.rawDataType.label}}
                      <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li ng-repeat="rawDataType in vm.rawDataTypes" ng-click="vm.rawDataType = rawDataType"
                        ng-class="{'active': rawDataType.value == vm.rawDataType.value}">
                        <a href="javascript:void(0)">{{rawDataType.label}}</a></li>
                  </ul>
                </div>
              </div>
              <div id="form-data" ng-show="vm.dataType == 'form-data'">
                <div form-table form-type="'form-data'" form-inputs="vm.formDataParams"></div>
              </div>
              <div id="x-www-form-urlencoded" ng-show="vm.dataType == 'x-www-form-urlencoded'">
                <div form-table form-type="'form'" form-inputs="vm.formParams"></div>
              </div>
              <div id="raw" ng-show="vm.dataType == 'raw'">
                <div class="x-editor">
                  <pre id="data-editor"></pre>
                </div>
              </div>
              <div id="binary" class="form-group" ng-if="vm.dataType == 'binary'">
                <input type="file" name="file">
              </div>
            </uib-tab>
            <uib-tab index="4" heading="Cookies">
              <textarea class="form-control" ng-model="vm.cookies" rows="10"
                  placeholder="cookieName=cookieValue（多个Cookie以换行隔开）"></textarea>
            </uib-tab>
          </uib-tabset>
        </div>
      </fieldset>
    </div>
    <div class="col-md-5">
      <fieldset>
        <legend>响应结果</legend>
        <div class="x-page-scope x-response-tab">
          <uib-tabset active="vm.respActiveTab" type="tabs" class="x-response">
            <uib-tab index="0" heading="Body">
              <div class="x-editor" ng-class="{'x-full-screen x-frame': vm.fullScreen}">
                <pre class="x-output" id="data-viewer"></pre>
              </div>
            </uib-tab>
            <uib-tab index="1" heading="Headers({{vm.respHeaders.length}})">
              <p ng-repeat="header in vm.respHeaders">
                <b>{{header.name | xHeaderKey}}: </b>{{header.value}}
              </p>
            </uib-tab>
            <uib-tab index="2" heading="Cookies">
              <p ng-repeat="cookie in vm.respCookies track by $index">{{cookie}}</p>
            </uib-tab>
            <uib-tab index="3" heading="Status:{{vm.respStatus}}" disable="true">
          </uib-tabset>
        </div>
      </fieldset>
    </div>
  </div>
  <script type="text/ng-template" id="viewer-tools">
    <div class="x-editor-tool">
      <div class="x-toolbar btn-group">
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleAutowrap()" title="自动换行">
          <i class="fa" ng-class="{'fa-toggle-on': vm.autowrap, 'fa-toggle-off': !vm.autowrap}"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.toggleFoldall()"
            title="{{vm.collapsed ? '全部展开' : '全部折叠'}}">
          <i class="fa" ng-class="{'fa-plus-square-o': vm.collapsed, 'fa-minus-square-o': !vm.collapsed}"></i>
        </button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.showSearchbox()" title="查找">
          <i class="fa fa-search"></i></button>
        <button type="button" class="btn btn-default btn-xs" ng-click="vm.fullScreen = !vm.fullScreen"
            title="{{vm.fullScreen ? '退出全屏' : '全屏'}}">
          <i class="fa" ng-class="{'fa-compress': vm.fullScreen, 'fa-expand': !vm.fullScreen}"></i>
        </button>
      </div>
    </div>
  </script>
</form>
